<template>
  <!--机构与用户管理-->
  <section class="page user-manage">
    <data-form :model="queryModel" @handleResetForm="follFeedback" @onSearch="refreshData" autoSearch :page="pageService" :rules="rules">
      <!--输入区域-->
      <template slot="inputs">
        <el-form-item label="外包公司" prop="outOrgName">
          <el-input v-model.trim="queryModel.outOrgName" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="外包公司代码" prop="divisionCode">
          <el-input v-model.trim="queryModel.divisionCode" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="分案状态" prop="divisionStatus">
          <el-select clearable placeholder="请选择" v-model="queryModel.divisionStatus">
            <el-option label="开启" value="0"></el-option>
            <el-option label="关闭" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="催收区域" prop="collectionArea">
          <el-input v-model.trim="queryModel.collectionArea" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="签约日期" prop="signTimeData">
          <el-date-picker
            v-model="queryModel.signTimeData"
            type="daterange"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="合同到期日期" prop="contractDueDateArray">
          <el-date-picker
            v-model="queryModel.contractDueDateArray"
            type="daterange"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </template>
    </data-form>

    <data-box :data="dataList" :page="pageService" @onPageChange="refreshData">
      <template slot="buttons">
        <el-button @click="creatBtn">创建</el-button>
      </template>
      <template slot="columns">
        <!--数据列区域-->
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="操作">
          <template slot-scope="scope">
            <el-button @click="checkDetail(scope)" type="text">查看</el-button>
            <el-button @click="editDetail(scope)" type="text">编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="公司名称" prop="outOrgName" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="外包公司代码" prop="divisionCode" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="状态" prop="status" :formatter="statusfn" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="联系人姓名" prop="contactsName" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="联系人电话" prop="contactsPhone" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="联系地址" prop="contactsArea" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="联系邮箱" prop="contactsEmail" show-overflow-tooltip ></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="机构管理员" prop="orgAdmin" show-overflow-tooltip></el-table-column>
        <el-table-column :formatter="row => $filter.dateFormat(row.signTime)" :min-width="$helper.getColumnWidth(4)" label="签约日期" prop="signTime" show-overflow-tooltip>
        <!-- <el-table-column :formatter="row => $filter.dictConvert(row.status, 'CommonState')" :min-width="$helper.getColumnWidth(4)" label="签约日期" prop="signTime">
          <template slot-scope="scope">
            <span>{{ scope.row.signTime | dateTimeFormat }}</span>
          </template> -->
        </el-table-column>
        <el-table-column  :formatter="row => $filter.dateFormat(row.contractDueDate)" :min-width="$helper.getColumnWidth(4)" label="合同到期日期" prop="contractDueDate" show-overflow-tooltip>
          <!-- <template slot-scope="scope">
            <span>{{ scope.row.contractDueDate | dateTimeFormat }}</span>
          </template> -->
        </el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="分案状态" prop="divisionStatus" :formatter="divisionStatusfn" show-overflow-tooltip>
        </el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="创建人" prop="operatorRealName" show-overflow-tooltip>
        </el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="创建时间" prop="createTime" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | dateTimeFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="编辑人" prop="updateRealName" show-overflow-tooltip></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="编辑时间" prop="updateTime" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.updateTime | dateTimeFormat }}</span>
          </template>
        </el-table-column>
      </template>
    </data-box>

    <el-dialog :center="true" width="900px" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialog.commissionedDialog" 
       :title="num === 'created' ? '新增外包机构' : num === 'update' ? '编辑外包机构' : '查看外包机构信息'"
      >
      <commissioned-dialog :caseRow.sync="caseRow" @close="dialog.commissionedDialog = false" :num="num" @refreshData="refreshData" ref="refresh"></commissioned-dialog>
    </el-dialog>
    <!-- <el-dialog :center="true" :close-on-press-escape="false" :visible.sync="dialog.commissioned" title="外包机构信息">
      <commissioned :caseRow.sync="caseRow" @close="dialog.commissioned=false" ref="refresh"></commissioned>
    </el-dialog> -->

    <!--添加机构-->
    <!-- <el-dialog title="新增机构" @close="dialog.addOrganizeFlag = false" :visible.sync="dialog.addOrganizeFlag" width="450px" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
      <add-outsourcing @close="dialog.addOrganizeFlag=false" @refresh="getDepartmentList()" :editData="editdata" :divisionCode="divisionCode" ref="add-dept"></add-outsourcing>
    </el-dialog> -->
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { Action, State, Mutation, Getter, namespace } from "vuex-class";
import { DepartmentService } from "~/services/management-service/department.service";
import { UserService } from "~/services/management-service/user.service";
import DepartmentTree from "~/components/system-manage/department-tree.vue";
import DataTree from "~/components/common/data-tree.vue";
import CommissionedDialog from "~/components/outsource-manage/commissioned-manage/commissioned-dialog.vue";
import { CityService } from "~/utils/city.service";
// import Commissioned from "~/components/outsource-manage/commissioned-manage/commissioned.vue";
// import AddOutsourcing from "~/components/system-manage/outsourcing/add-outsourcing.vue";

@Layout("workspace")
@Component({
  components: {
    DepartmentTree,
    CommissionedDialog,
    DataTree,
    // Commissioned,
    // AddOutsourcing,
  }
})
export default class Outsourcing extends Vue {
  @Dependencies(DepartmentService)
  private departmentService: DepartmentService;
  @Dependencies(UserService)
  private userService: UserService;
  @Dependencies(PageService)
  private pageService: PageService;

  @Getter private departmentData;
  @Action private getDepartmentList;
  @Action private getCompanyList;

  private userModel: any = {
    deptCode: ""
  };
  private companyCode: any = "";
  private dialog: any = {
    editOrganizeFlag: false,
    addOrganizeFlag: false,
    commissionedDialog: false,
    commissioned: false
  };
  private num: any = 'created';
  private editdata: any = {};
  private divisionCode: string = "";
  private dept: any = "";

  private proinviceList: any[] = []; // 省
  private cityList: any[] = []; //市
  private departmentList: any[] = []; //组织机构
  private caseRow: any = {}; //查看或编辑某一条row
  private dataList: any[] = [];

  private queryModel: any = {
    outOrgName: "",
    divisionCode: "",
    divisionStatus: "",
    collectionArea: "",
    signTimeData: [],
    signTime: "",
    signEndTime: "",
    contractDueDateArray: [],
    contractDueDate: "",
    contractDueEndDate: ""
  };
  private rules: any = {
    divisionCode: [
      { required: false, message: '请输入外包公司代码', trigger: 'blur' },
      { pattern: /^[A-Za-z0-9]+$/, message: "请输入英文字母或数字", trigger: "blur" }
    ]
  };
  private refresh (formName) {
    this.$nextTick(() => {
      const form: any = this.$refs[formName];
      form.refresh();
    });
  }

  private mounted () {
    this.getDepartments();
    this.refreshData();
    this.getProvinces();
    this.getDepartmentList();
    this.getCompanyList();
  }

  private statusfn (val) {
    let state = "";
    switch (val.status) {
      case 0:
        state = "启用";
        break;
      case 1:
        state = "停用";
        break;
    }
    return state;
  }
  private divisionStatusfn (val) {
    let state = "";
    switch (val.divisionStatus) {
      case 0:
        state = "开启";
        break;
      case 1:
        state = "关闭";
        break;
    }
    return state;
  }

  /**
   * 点击获取机构id
   */
  private onChange (value) {
    this.userModel.deptCode = value.deptCode;
    this.divisionCode = value.id;
    this.dept = value;
    this.refreshData();
  }

  private refreshData () {
    if(this.queryModel.signTimeData.length > 0){
      this.queryModel.signTime = this.queryModel.signTimeData[0]
      this.queryModel.signEndTime = this.queryModel.signTimeData[1]
    }
    if(this.queryModel.contractDueDateArray.length > 0){
      this.queryModel.contractDueDate = this.queryModel.contractDueDateArray[0]
      this.queryModel.contractDueEndDate = this.queryModel.contractDueDateArray[1]
    }
    this.userService
      .getAllOutOrgInfo(this.queryModel, this.pageService)
      .subscribe(data => {
        this.dataList = data;
        data.map(item => {
          item.createTime = item.timeCreated;
          item.updateTime = item.timeModified;
        });
      });
  }

  private onEdit (value) {
    this.dialog.editOrganizeFlag = true;
    this.editdata = value;
  }
  private onAdd (value) {
    this.dialog.addOrganizeFlag = true;
  }
  /**
   * 移除机构
   */
  private onDelete (value) {
    this.$confirm("此操作将永久删除该组织机构, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }).then(() => {
      this.departmentService.deleteDepartment(value.id).subscribe(data => {
        this.getDepartmentList();
        this.$message.success("删除成功!");
      });
    });
  }

  //获取省数据
  private getProvinces () {
    this.proinviceList = CityService.getCityData({ level: 1 });
  }

  //获取市
  private getCitys (provinceId) {
    this.cityList = this.$city.getCityData({ level: 1, id: provinceId }); // 城市列表
  }

  //获取组织机构
  private getDepartments () {
    this.departmentService.querySubDepartment().subscribe(data => {
      this.departmentList = data;
    });
  }

  /**
   * 创建
   */
  private creatBtn () {
    this.num = 'created';
    this.dialog.commissionedDialog = true;
    this.caseRow = {};
  }

  /**
   * 编辑
   */
  private editDetail (scope) {
    this.num = 'update';
    this.dialog.commissionedDialog = true;
    this.userService.getOrgInfoById({ id: scope.row.id }).subscribe(data => {
      this.caseRow = data;
      this.caseRow.divisionStatus =
        String(data.divisionStatus) === "null"
          ? ""
          : String(data.divisionStatus);
      this.caseRow.signTime = this.$filter.dateTimeFormat(data.signTime) + "";
      this.caseRow.contractDueDate = this.$filter.dateTimeFormat(data.contractDueDate) + "";
    });
  }

  /**
   * 查看
   */
  private checkDetail (scope) {
    this.num = 'look';
    this.dialog.commissionedDialog = true;
    this.userService.getOrgInfoById({ id: scope.row.id }).subscribe(data => {
      this.caseRow = data;
      this.caseRow.divisionStatus =
        String(data.divisionStatus) === "null"
          ? ""
          : String(data.divisionStatus);
      this.caseRow.signTime = this.$filter.dateTimeFormat(data.signTime) + "";
      this.caseRow.contractDueDate = this.$filter.dateTimeFormat(data.contractDueDate) + "";
    });
  }

  /**
   * 重置numberRange
   */
  private follFeedback () {
    this.queryModel.outOrgName = "";
    this.queryModel.divisionCode = "";
    this.queryModel.status = "";
    this.queryModel.signTime = "";
    this.queryModel.signEndTime = "";
    this.queryModel.contractDueDate = "";
    this.queryModel.contractDueEndDate = "";
  }
}
</script>

<style lang="less" scoped>
.page.user-manage {
  .col-span-2 {
    padding: 0;
  }
  .add-org {
    padding: 10px 20px;
    text-align: right;
    border-bottom: solid 1px #e4e4e4;
  }
  .org-tree {
    border: solid 1px #e4e4e4;
    min-height: 600px;
  }
}
</style>
